<template>
  <div class="overtime-container">


    <!-- 主内容区域 -->
    <div class="main-content">
            <el-tabs 
        ref="tabsRef" 
        v-model="activeTab" 
        class="modern-tabs"
        @tab-click="handleTabsClick"
      >
        <!-- 加班申请标签页 -->
        <el-tab-pane label="加班申请" name="0">
          <div class="tab-content">
            <div class="form-card">
              <div class="form-scroll-container">
                <el-form 
                  ref="formRef" 
                  :model="formData" 
                  :rules="formRules"
                  label-position="top"
                  class="overtime-form"
                >
                <!-- 加班事由 -->
                <el-form-item label="加班事由" prop="jobOverTimeReason" class="form-item">
                  <div class="reason-radio-group">
                    <el-radio-group v-model="formData.jobOverTimeReason" class="radio-group">
                      <el-radio 
                        v-for="item in overtimeReasonOptions" 
                        :key="item.value"
                        :label="item.value"
                        class="reason-radio"
                      >
                        {{ item.label }}
                      </el-radio>
                    </el-radio-group>
                            </div>
                </el-form-item>

                <!-- 加班项目 -->
                <el-form-item label="加班项目" prop="jobOverTimeList" class="form-item">
                  <div class="project-selector">
                    <div class="project-input-row">
                      <el-select 
                        v-model="selectedReason" 
                        filterable 
                        allow-create 
                        default-first-option
                        clearable 
                        placeholder="选择或输入加班项目" 
                        class="project-select"
                        @change="autoAddReason"
                      >
                        <el-option 
                          v-for="item in reasonOptions" 
                          :key="item.requirementId"
                          :label="item.jobOverTimeListName" 
                          :value="item.jobOverTimeListName" 
                        />
                                    </el-select>
                                </div>
                                            </div>

                  <!-- 已选项目列表 -->
                  <div class="selected-projects" v-if="formData.jobOverTimeList.length > 0">
                    <div class="projects-list">
                      <div 
                        v-for="(reason, index) in formData.jobOverTimeList" 
                        :key="index"
                        class="project-item"
                      >
                        <div class="project-header">
                          <span class="project-name">{{ reason.jobOverTimeListName }}</span>
                          <el-button 
                            type="danger" 
                            size="small" 
                            circle
                            @click="removeReason(index)"
                            class="remove-btn"
                          >
                            <el-icon><Delete /></el-icon>
                                                    </el-button>
                                                </div>
                        <el-input 
                          v-model="reason.jobOverTimeContent" 
                          type="textarea" 
                          :rows="3"
                                                    :placeholder="`请输入${reason.jobOverTimeListName}的详细内容`"
                          class="project-content"
                        />
                                            </div>
                                            </div>
                                        </div>
                  
                  <div v-else class="empty-projects">
                    <el-empty description="暂未添加加班项目" :image-size="40" />
                                </div>
                </el-form-item>

                            <!-- 时间选择 -->
                <el-form-item prop="jobOverTimeBeginTime" class="form-item">
                  <div class="time-selector">
                    <div class="time-item">
                      <label class="time-label">开始时间</label>
                      <el-date-picker 
                        v-model="formData.jobOverTimeBeginTime" 
                        type="datetime"
                        placeholder="选择开始时间" 
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" 
                        class="time-picker"
                        @change="calculateDuration" 
                      />
                                </div>
                    <div class="time-item">
                      <label class="time-label">结束时间</label>
                      <el-date-picker 
                        v-model="formData.jobOverTimeEndTime" 
                        type="datetime"
                        placeholder="选择结束时间" 
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" 
                        class="time-picker"
                                        :disabled="!formData.jobOverTimeBeginTime"
                        :min-date="formData.jobOverTimeBeginTime" 
                        @change="calculateDuration" 
                      />
                                </div>
                    <div class="time-item">
                      <label class="time-label">加班时长</label>
                      <el-input 
                        v-model="duration" 
                        disabled 
                        class="duration-input"
                        placeholder="自动计算"
                      />
                                </div>
                    <div class="time-item submit-item">
                      <el-button 
                        type="primary" 
                        @click="submitForm" 
                        class="submit-btn"
                        :loading="submitting"
                      >
                        {{ editingId ? '更新申请' : '提交申请' }}
                                </el-button>
                      <el-button 
                        v-if="editingId" 
                        @click="cancelEdit"
                        class="cancel-btn"
                      >
                                    取消修改
                                </el-button>
                            </div>
                  </div>
                </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 申请列表标签页 -->
        <el-tab-pane label="申请列表" name="1">
          <div class="tab-content">
            <div class="list-header">
              <div class="header-left">
                <div class="total-hours">
                  <span class="total-label">加班总时长</span>
                  <span class="total-value">{{ totalOvertimeHours }}小时</span>
                                </div>
              </div>
              <div class="header-right" style="display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: nowrap; min-width: 0;">
                <el-button 
                  type="text" 
                  size="small" 
                  @click="appFiltersCollapsed = !appFiltersCollapsed" 
                  style="white-space: nowrap;"
                >
                  {{ appFiltersCollapsed ? '收起筛选' : '展开筛选' }}
                </el-button>
                <div 
                  class="status-filter" 
                  style="display:flex; align-items:center; gap:8px; flex-shrink:0;"
                  v-show="appFiltersCollapsed"
                >
                  <span class="filter-label">状态：</span>
                  <el-button 
                    v-for="status in statusOptions" 
                    :key="status.value"
                    :type="appStatusFilter === status.value ? 'primary' : ''" 
                    size="small"
                    @click="appStatusFilterHandler(status.value)"
                  >
                    {{ status.label }}
                  </el-button>
                </div>
                <div class="print-container" style="flex-shrink: 0;" v-show="appFiltersCollapsed">
                  <el-button 
                    type="primary" 
                    @click="printApplication" 
                    class="print-btn"
                    style="white-space: nowrap;"
                  >
                    <el-icon size="18"><Printer /></el-icon>
                                    打印申请单
                                </el-button>
                            </div>
                        </div>
                                    </div>

            <!-- 申请列表 -->
            <div class="overtime-list">
              <div 
                v-for="(item, index) in applicationFilteredList" 
                :key="index"
                class="overtime-card"
              >
                <div class="card-header">
                  <div class="header-left">
                    <div class="applicant-info">
                      <div class="applicant-details">
                        <span class="applicant-time">{{ formatDate(item.jobOverTimeBeginTime) }}</span>
                                    </div>
                    </div>
                    <div class="reason-badge">
                      <el-tag class="reason-pill" type="info" size="large" effect="light">
                        {{ item.jobOverTimeReason || '加班事由' }}
                      </el-tag>
                    </div>
                  </div>
                  <div class="header-right">
                    <div class="time-info">
                      <div class="time-item">
                        <el-icon><Clock /></el-icon>
                        <span>{{ formatTime(item.jobOverTimeBeginTime) }}</span>
                      </div>
                      <div class="time-item">
                        <el-icon><Clock /></el-icon>
                        <span>{{ formatTime(item.jobOverTimeEndTime) }}</span>
                      </div>
                      <div class="duration-info">
                        <el-tag type="info" size="small">{{ item.jobOverTimeLong }}小时</el-tag>
                      </div>
                    </div>
                    <div class="status-badge">
                      <el-tag :type="getStatusType(item.jobOverTimeStatus)" size="large" effect="dark">
                        {{ getStatusName(item.jobOverTimeStatus) }}
                      </el-tag>
                    </div>
                  </div>
                </div>

                <div class="card-body">
                  
                  <div class="overtime-projects">
                    <div class="projects-header">
                    <h4 class="projects-title">加班项目</h4>
                      <el-dropdown 
                        :teleported="false" 
                        placement="bottom-end"
                        @command="(cmd:any) => handleActionCommand(cmd, item)"
                        style="padding-right: 20px;"
                      >
                        <el-button type="primary" size="small" class="action-btn">
                          操作
                          <el-icon style="margin-left:4px;"><CaretBottom /></el-icon>
                        </el-button>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item v-if="item.jobOverTimeStatus !== 3" command="edit">
                              <el-icon style="margin-right:6px;"><Edit /></el-icon>
                              修改
                            </el-dropdown-item>
                            <el-dropdown-item v-if="item.jobOverTimeStatus !== 3" command="void">
                              <el-icon style="margin-right:6px;"><Delete /></el-icon>
                              作废
                            </el-dropdown-item>
                            <el-dropdown-item command="view">
                              <el-icon style="margin-right:6px;"><View /></el-icon>
                              查看
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>
                    <div class="projects-grid">
                      <div 
                        v-for="(project, pIndex) in item.jobOverTimeList.slice(0, 2)" 
                        :key="pIndex"
                        class="project-card"
                      >
                        <div class="project-header"></div>
                        <div class="project-content">
                          {{ project.jobOverTimeContent || '暂无详细内容' }}
                        </div>
                      </div>
                      <el-tag v-if="item.jobOverTimeList && item.jobOverTimeList.length > 2" type="info" size="small" class="more-tag">...</el-tag>
                    </div>
                  </div>
                </div>

                
              </div>

              <!-- 空状态 -->
              <div v-if="!applicationFilteredList || applicationFilteredList.length === 0" class="empty-state">
                <el-empty description="暂无加班申请记录" :image-size="120" />
                            </div>
                        </div>
                    </div>
                </el-tab-pane>

        <!-- 审核列表标签页 -->
        <el-tab-pane 
          label="审核列表" 
          name="2"
          v-if="userAuthId === '888' || userAuthId === '999' || userAuthId === '333' || userAuthId === '1212'"
        >
          <div class="tab-content">
            <div class="audit-container">
              <!-- 筛选工具栏 -->
              <div class="filter-toolbar">
                                  <!-- 单行布局：申请人筛选 + 筛选条件 -->
                  <div class="filter-section-compact">
                    <div class="filter-header">
                      <div class="filter-header-left"></div>
                      <el-button type="text" size="small" @click="applicantFiltersCollapsed = !applicantFiltersCollapsed">
                        {{ applicantFiltersCollapsed ? '展开' : '收起' }}
                      </el-button>
                    </div>
                    
                                        <transition name="filter-collapse" mode="out-in">
                      <div class="filter-row-split" v-show="!applicantFiltersCollapsed" key="expanded">
                      <!-- 左侧：申请人筛选 -->
                      <div class="filter-left-section">
                        <div class="filter-group-applicant">
                          <div class="applicant-tags">
                            <el-check-tag 
                              :checked="applicantFilter === '全部'"
                              @change="() => applicantFilterHander('全部')"
                              class="filter-tag"
                            >
                              全部 ({{ pendingApprovalListAll() }})
                            </el-check-tag>
                            <el-check-tag 
                              v-for="applicant in applicantOptions" 
                              :key="applicant.userUUID"
                              :checked="applicantFilter === applicant.userName"
                              @change="() => applicantFilterHander(applicant)"
                              class="filter-tag"
                            >
                              {{ applicant.userName }} ({{ applicant.count }})
                            </el-check-tag>
                          </div>
                        </div>
                      </div>
                      
                      <!-- 右侧：日期、部门、状态筛选 -->
                      <div class="filter-right-section">
                        <!-- 日期筛选 -->
                        <div class="filter-group-right">
                          <span class="filter-label-right">日期：</span>
                          <el-date-picker 
                            v-model="dateRange" 
                            type="daterange" 
                            range-separator="至"
                            start-placeholder="开始日期" 
                            end-placeholder="结束日期" 
                            value-format="YYYY-MM-DD"
                            @change="handleAuditDateRangeChange" 
                            class="date-picker-right"
                          />
                        </div>
                        
                        <!-- 部门筛选 -->
                        <div class="filter-group-right">
                          <span class="filter-label-right">部门：</span>
                          <div class="filter-buttons-right">
                            <el-button 
                              v-for="dept in departmentOptions" 
                              :key="dept.value"
                              :type="departmentFilter === dept.value ? 'primary' : ''"
                              @click="departmentFilterHandler(dept.value)"
                              class="filter-btn-right"
                              size="small"
                            >
                              {{ dept.label }}
                            </el-button>
                          </div>
                        </div>
                        
                        <!-- 状态筛选 -->
                        <div class="filter-group-right">
                          <span class="filter-label-right">状态：</span>
                          <div class="filter-buttons-right">
                            <el-button 
                              v-for="status in statusOptions" 
                              :key="status.value"
                              :type="statusFilter === status.value ? 'primary' : ''" 
                              @click="statusFilterHandler(status.value)"
                              class="filter-btn-right"
                              size="small"
                            >
                              {{ status.label }}
                            </el-button>
                          </div>
                        </div>
                        
                        <!-- 导出按钮 -->
                        <div class="filter-group-right">
                          <el-button 
                            type="success" 
                            @click="showExportDialog" 
                            size="small"
                            class="export-btn-right"
                          >
                            <el-icon><Document /></el-icon>
                            导出审核列表
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </transition>
                </div>
              </div>

              <!-- 审核列表表格 -->
              <div class="table-container">
                <el-table 
                  :data="filteredPendingApprovalList" 
                  border 
                  stripe 
                  class="audit-table"
                  v-loading="auditTableLoading || isLoadingMore"
                  :element-loading-text="isLoadingMore ? '正在加载更多数据...' : '加载中...'"
                  :element-loading-background="isLoadingMore ? 'rgba(255, 255, 255, 0.9)' : 'rgba(255, 255, 255, 0.8)'"
                  height="60vh"
                  ref="auditTableRef"
                >
                            <el-table-column prop="userName" label="申请人" width="100" align="center" />
                  <el-table-column prop="jobOverTimeList" label="加班项" min-width="300">
                                <template #default="{ row }">
                      <div class="overtime-items">
                        <div 
                          v-for="(item, index) in row.jobOverTimeList" 
                          :key="index" 
                          class="overtime-item"
                        >
                          <span class="item-index">{{ index + 1 }}.</span>
                          <span class="item-name">{{ item.jobOverTimeListName }}</span>
                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="jobOverTimeContent" label="加班详细内容" min-width="250">
                                <template #default="{ row }">
                      <div class="overtime-contents">
                        <div 
                          v-for="(item, index) in row.jobOverTimeList" 
                          :key="index" 
                          class="overtime-content"
                        >
                          <span class="content-index">{{ index + 1 }}.</span>
                          <span class="content-text">{{ item.jobOverTimeContent }}</span>
                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                  <el-table-column prop="jobOverTimeBeginTime" label="开始时间" width="160" align="center" />
                  <el-table-column prop="jobOverTimeEndTime" label="结束时间" width="160" align="center" />
                  <el-table-column prop="jobOverTimeLong" label="时长" width="100" align="center">
                                <template #default="{ row }">
                      <el-tag type="info" size="small">{{ row.jobOverTimeLong }}小时</el-tag>
                                </template>
                            </el-table-column>
                  <el-table-column label="状态" width="120" align="center">
                                <template #default="{ row }">
                      <el-tag :type="getStatusType(row.jobOverTimeStatus)" size="small">
                        {{ getStatusName(row.jobOverTimeStatus) }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150" align="center" fixed="right">
                    <template #default="{ row }">
                      <div class="action-buttons">
                        <el-button 
                          v-if="row.jobOverTimeStatus != 3" 
                          type="success" 
                          size="small"
                                            @click="showApprovalDialog(row)"
                          class="action-btn audit-btn"
                        >
                                            审核
                                        </el-button>
                        <el-button 
                          type="primary" 
                          size="small" 
                          @click="showDetailDialog(row)"
                          class="action-btn view-btn"
                        >
                                            查看
                                        </el-button>
                                    </div>
                                </template>
                            </el-table-column>
                            
                            <!-- 懒加载行指示器 -->
                            <template #append>
                              <tr v-if="isLoadingMore" class="lazy-loading-row">
                                <td colspan="8" class="lazy-loading-cell">
                                  <div class="row-loading-content">
                                    <el-icon class="is-loading"><Loading /></el-icon>
                                    <span>正在加载更多数据...</span>
                                  </div>
                                </td>
                              </tr>
                            </template>
                        </el-table>
                        
                        <!-- 懒加载状态指示器 -->
                        <div v-if="isLoadingMore" class="lazy-loading-indicator">
                          <div class="loading-content">
                            <el-icon class="is-loading"><Loading /></el-icon>
                            <span>正在加载更多数据...</span>
                            <div class="loading-dots">
                              <span class="dot"></span>
                              <span class="dot"></span>
                              <span class="dot"></span>
                            </div>
                          </div>
                        </div>
                        
                        <!-- 加载更多提示区域 -->
                        <div class="load-more-container" v-if="filteredPendingApprovalList.length > 0">

                          <div v-if="loading" class="loading-more">
                            <el-icon class="is-loading"><Loading /></el-icon>
                            <span>正在加载初始数据...</span>
                            <div class="loading-progress">
                              <div class="progress-bar">
                                <div class="progress-fill"></div>
                              </div>
                            </div>
                          </div>
                          <div v-else-if="isLoadingMore" class="loading-more">
                            <el-icon class="is-loading"><Loading /></el-icon>
                            <span>正在加载更多数据...</span>
                            <div class="loading-progress">
                              <div class="progress-bar">
                                <div class="progress-fill"></div>
                              </div>
                            </div>
                          </div>
                          <div v-else-if="!hasMore" class="no-more-data">
                            <el-icon><Check /></el-icon>
                            <span>已加载全部数据 (共 {{ filteredPendingApprovalList.length }} 条)</span>
                          </div>
                          <div v-else class="load-more-tip">
                            <span>滚动到底部自动加载更多</span>
                            <div class="scroll-hint">
                              <el-icon><CaretBottom /></el-icon>
                              <span>向下滚动</span>
                            </div>
                            <el-button 
                              type="primary" 
                              size="small" 
                              @click="loadMoreData"
                              style="margin-left: 10px;"
                              :disabled="loading || isLoadingMore"
                            >
                              {{ (loading || isLoadingMore) ? '加载中...' : '手动加载更多' }}
                            </el-button>

                          </div>
                        </div>
              </div>
            </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 详细查看弹窗 -->
    <el-dialog 
      v-model="detailVisible" 
      title="加班申请详情" 
      width="900px" 
      class="detail-dialog"
      :top="'5vh'"
      destroy-on-close
    >
      <div class="detail-content">
        <div class="detail-header">
          <div class="detail-header-row">
            <span class="info-chip">申请人：{{ currentDetailItem.userName || '' }}</span>
            <span class="info-chip">部门：{{ currentDetailItem.departmentName || '' }}</span>
            <el-tag class="reason-pill" type="info" size="small" effect="light">
              {{ currentDetailItem.jobOverTimeReason || '加班事由' }}
            </el-tag>
            <span class="status-chip">
              <el-tag :type="getStatusType(currentDetailItem.jobOverTimeStatus)" size="large">
                {{ getStatusName(currentDetailItem.jobOverTimeStatus) }}
              </el-tag>
            </span>
            <span class="approved-chip" v-if="currentDetailItem.approvedHours">
              <el-tag class="approved-pill" type="success" size="small" effect="light">
                核准工时：{{ currentDetailItem.approvedHours }} 小时
              </el-tag>
            </span>
          </div>
        </div>

        <div class="detail-body">
          <div class="detail-section">
            <h4 class="section-title">
              加班内容
              <span class="time-inline">
                <span class="time-chip">开始 {{ formatDateTime(currentDetailItem.jobOverTimeBeginTime) }}</span>
                <span class="time-chip">结束 {{ formatDateTime(currentDetailItem.jobOverTimeEndTime) }}</span>
                <span class="time-chip">时长 {{ currentDetailItem.jobOverTimeLong }} 小时</span>
              </span>
            </h4>
            <div class="overtime-details">
              <div 
                v-for="(item, index) in currentDetailItem.jobOverTimeList" 
                :key="index"
                class="detail-item"
              >
                <div class="item-header">
                  <span class="item-title">{{ index + 1 }}. {{ item.jobOverTimeListName }}</span>
                </div>
                <div class="item-content">{{ item.jobOverTimeContent }}</div>
              </div>
              <div class="overtime-details-sign" v-if="currentDetailItem.signature">
                <img 
                  :src="currentDetailItem.signature" 
                  alt="签名"
                  class="signature-image"
                />
              </div>
              <div class="signature-hint" v-else>
                暂无签名
              </div>
            </div>
          </div>

          

          <div class="detail-section" v-if="currentDetailItem.approvalComment">
            <h4 class="section-title">审核意见</h4>
            <div class="comment-content">{{ currentDetailItem.approvalComment }}</div>
          </div>

          
        </div>
            </div>

            <template #footer>
        <el-button @click="detailVisible = false" type="primary">关闭</el-button>
            </template>
        </el-dialog>

        <!-- 审核弹窗 -->
    <el-dialog 
      v-model="approvalVisible" 
      title="审核加班申请" 
      width="900px" 
      class="approval-dialog"
      :top="'5vh'"
      destroy-on-close
    >
      <div class="approval-content">
        <!-- 审核头部信息 -->
        <div class="approval-header">
          <div class="approval-header-row">
            <span class="info-chip">申请人：{{ currentDetailItem.userName || '' }}</span>
            <span class="info-chip">部门：{{ currentDetailItem.departmentName || '' }}</span>
            <el-tag class="reason-pill" type="info" size="small" effect="light">
              {{ currentDetailItem.jobOverTimeReason || '加班事由' }}
            </el-tag>
            <span class="status-chip">
              <el-tag :type="getStatusType(currentDetailItem.jobOverTimeStatus)" size="large">
                {{ getStatusName(currentDetailItem.jobOverTimeStatus) }}
              </el-tag>
            </span>
          </div>
          

        </div>

        <!-- 审核内容区域 -->
        <div class="approval-body">
          <!-- 加班内容区域 -->
          <div class="approval-section">
            <h4 class="section-title">
              加班内容
              <span class="time-inline">
                <span class="time-chip">开始 {{ formatDateTime(currentDetailItem.jobOverTimeBeginTime) }}</span>
                <span class="time-chip">结束 {{ formatDateTime(currentDetailItem.jobOverTimeEndTime) }}</span>
                <span class="time-chip">时长 {{ currentDetailItem.jobOverTimeLong }} 小时</span>
              </span>
            </h4>
            <div class="overtime-details">
              <div 
                v-for="(item, index) in currentDetailItem.jobOverTimeList" 
                :key="index"
                class="detail-item"
              >
                <div class="item-header">
                  <span class="item-title">{{ index + 1 }}. {{ item.jobOverTimeListName }}</span>
                </div>
                <div class="item-content">{{ item.jobOverTimeContent }}</div>
              </div>
              <div class="overtime-details-sign" v-if="currentDetailItem.signature">
                <img 
                  :src="currentDetailItem.signature" 
                  alt="签名"
                  class="signature-image"
                />
              </div>
              <div class="signature-hint" v-else>
                暂无签名
              </div>
            </div>
          </div>

          <!-- 审核意见区域 -->
          <div class="approval-section" v-if="currentDetailItem.approvalComment">
            <h4 class="section-title">审核意见</h4>
            <div class="comment-content">{{ currentDetailItem.approvalComment }}</div>
          </div>
        </div>
      </div>

            <template #footer>
        <div class="approval-actions">
          <el-button @click="approvalVisible = false" size="large">取消</el-button>
          <el-button 
            type="danger" 
            @click="showRejectDialog"
            size="large"
          >
            驳回
          </el-button>
          <el-button 
            type="primary" 
            @click="showApproveDialog"
            size="large"
          >
            通过
          </el-button>
        </div>
            </template>
        </el-dialog>

        <!-- 驳回弹窗 -->
    <el-dialog 
      v-model="rejectDialogVisible" 
      title="驳回申请" 
      width="500px"
      destroy-on-close
    >
      <div class="reject-content">
        <el-form-item label="驳回原因" required>
          <el-input 
            v-model="currentDetailItem.approvalComment" 
            type="textarea" 
            :rows="4" 
            placeholder="请输入驳回原因"
            maxlength="500"
            show-word-limit
          />
        </el-form-item>
      </div>
            <template #footer>
                <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleApproval(2)"
          :disabled="!currentDetailItem.approvalComment"
        >
          确认驳回
        </el-button>
            </template>
        </el-dialog>

        <!-- 通过弹窗 -->
    <el-dialog 
      v-model="approveDialogVisible" 
      title="核准工时" 
      width="500px"
      destroy-on-close
    >
      <div class="approve-content">
        <el-form-item label="申请加班时长">
          <el-input 
            v-model="currentDetailItem.jobOverTimeLong" 
            disabled 
            class="disabled-input"
          />
        </el-form-item>
        <el-form-item label="核准工时" required>
          <el-input-number 
            v-model="currentDetailItem.approvedHours" 
            :min="0" 
            :max="24"
            :precision="1"
            placeholder="请输入核准工时"
            class="hours-input"
          />
          <span class="unit-text">小时</span>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input 
            v-model="currentDetailItem.approvalComment" 
            type="textarea" 
            :rows="3"
            placeholder="请输入审核意见（可选）"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
            </div>
            <template #footer>
                <el-button @click="approveDialogVisible = false">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleApproval(3)"
          :disabled="!currentDetailItem.approvedHours"
        >
          确认通过
        </el-button>
            </template>
        </el-dialog>

        <!-- 导出对话框 -->
        <el-dialog 
          v-model="exportDialogVisible" 
          title="导出审核列表" 
          width="400px"
          :close-on-click-modal="false"
        >
          <div class="export-dialog-content">
            <div class="export-month-row">
              <span class="export-label">选择月份：</span>
              <el-date-picker
                v-model="exportMonth"
                type="month"
                placeholder="请选择月份"
                format="YYYY-MM"
                value-format="YYYY-MM"
                size="large"
                style="width: 200px;"
              />
            </div>
          </div>
          
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="exportDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="handleExport">确认导出</el-button>
            </span>
          </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
import { Delete, Printer, Plus, EditPen, CaretBottom, Loading, Check, Document } from '@element-plus/icons-vue';
import {
    GetSelfOverTimeCount, //获取本人未提交加班申请的需求
    CreateJobOverTime,//创建加班申请单
    UpdateJobOverTime,//修改加班申请单
    GetJobOverTimeList,//获取我的加班申请单列表
    VoidedJobOverTimeList,//作废加班申请单
    GetAuditJobOverTimeList,//获取加班申请列表
    GetAuditJobOverTimeListByUUID,// 根据UUID获取加班申请单(管理员)
    GetAuditJobOverTimeMySign,// 获取本人签字图片(管理员)
    AuditJobOverTimeById,// 审核加班申请单
    GetJobOverTimeById,// 审核加班申请单
    PrintJobOverTimeStatus,// 完成打印的加班申请单
    ExportOverTime,// 导出加班申请单
} from "@/api/newDemands/index";

const userAuthId = ref();
function handleActionCommand(cmd: string, row: any) {
  if (cmd === 'edit') {
    // 延迟到下一帧，避免下拉关闭动画与切换标签冲突导致闪烁
    requestAnimationFrame(() => editOvertime(row));
  } else if (cmd === 'void') {
    withdrawOvertime(row);
  } else {
    showDetailDialog(row);
  }
}
const tabsRef = ref(); // 添加tabsRef引用
const activeTab = ref('0'); // '0' 对应第一个标签页（加班申请）
const formRef = ref(); // 表单引用
const auditTableRef = ref(); // 审核表格引用

// 表单验证规则
const formRules = {
  jobOverTimeReason: [
    { required: true, message: '请选择加班事由', trigger: 'change' }
  ],
  jobOverTimeList: [
    { required: true, message: '请至少添加一个加班项目', trigger: 'change' }
  ],
  jobOverTimeBeginTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  jobOverTimeEndTime: [
    { required: true, message: '请选择结束时间', trigger: 'change' }
  ]
};

// 状态选项
const statusOptions = [
  { label: '全部', value: 0 },
  { label: '待审核', value: 1 },
  { label: '审核未通过', value: 2 },
  { label: '审核通过', value: 3 }
];

// 加载状态
const submitting = ref(false);
const tableLoading = ref(false);
const auditTableLoading = ref(false);

// 在script部分添加加班事由选项
const overtimeReasonOptions = ref([
    { value: '项目上线', label: '项目上线' },
    { value: '临时加班', label: '临时加班' },
    { value: '紧急任务', label: '紧急任务' },
    { value: '系统维护', label: '系统维护' },
    { value: '客户支持', label: '客户支持' },
    { value: '项目赶工', label: '项目赶工' },
]);

// 审核功能
const rejectDialogVisible = ref(false);
const approveDialogVisible = ref(false);
// 显示驳回对话框
const showRejectDialog = async (): Promise<void> => {
    try {
        // 自动获取签名
        const { data } = await GetAuditJobOverTimeMySign();
        if (data.code === 200) {
            currentDetailItem.value.signature = data.data;
            // 清空驳回原因，确保不显示默认内容
            currentDetailItem.value.approvalComment = '';
            rejectDialogVisible.value = true;
        } else {
            ElMessage.error('获取签名失败，请稍后重试');
        }
    } catch (error) {
        ElMessage.error('获取签名失败，请稍后重试');
        console.error(error);
    }
};

// 显示通过对话框
const showApproveDialog = async (): Promise<void> => {
    try {
        // 自动获取签名
        const { data } = await GetAuditJobOverTimeMySign();
        if (data.code === 200) {
            currentDetailItem.value.signature = data.data;
            
            // 设置默认值：核准工时等于申请加班时长，审核意见为"审核通过"
            currentDetailItem.value.approvedHours = parseFloat(currentDetailItem.value.jobOverTimeLong) || 0;
            currentDetailItem.value.approvalComment = '审核通过';
            
            approveDialogVisible.value = true;
        } else {
            ElMessage.error('获取签名失败，请稍后重试');
        }
    } catch (error) {
        ElMessage.error('获取签名失败，请稍后重试');
        console.error(error);
    }
};

// 处理审核提交
const handleApproval = async (auditStatus: number): Promise<void> => {
    try {
        // 验证逻辑
        if (auditStatus === 3 && !currentDetailItem.value.approvedHours) {
            ElMessage.error('请填写核准工时');
            return;
        }

        if (auditStatus === 2 && !currentDetailItem.value.approvalComment) {
            ElMessage.error('请填写驳回原因');
            return;
        }

        // 准备提交数据
        const submitData = {
            id: currentDetailItem.value.ID,
            jobOverTimeStatus: auditStatus,
            approvalComment: currentDetailItem.value.approvalComment,
            signature: currentDetailItem.value.signature,
            approvedHours: Number(currentDetailItem.value.approvedHours)
        };
        // 调用API
        const { data } = await AuditJobOverTimeById(submitData);

        if (data.code === 200) {
            ElMessage.success(data.msg);
            // 关闭所有弹窗
            approvalVisible.value = false;
            rejectDialogVisible.value = false;
            approveDialogVisible.value = false;
            // 刷新列表
            if (userAuthId.value === '888' || userAuthId.value === '999') {
                resetPagination(); // 重置分页状态
                getAuditJobOverTimeListByUUID();
            } else {
                getJobOverTimeList();
            }
        } else {
            ElMessage.error(data.msg);
        }
    } catch (error) {
        ElMessage.error('审核失败，请稍后重试');
        console.error(error);
    }
};

// 格式化日期时间
const formatDateTime = (datetime: any) => {
    if (!datetime) return '';
    const date = new Date(datetime);
    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}时${date.getMinutes()}分`;
};

// 格式化日期
const formatDate = (datetime: any) => {
    if (!datetime) return '';
    const date = new Date(datetime);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

// 格式化时间
const formatTime = (datetime: any) => {
    if (!datetime) return '';
    const date = new Date(datetime);
    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};
const ids = ref([]);
// 修改后的打印功能
const printApplication = () => {
    // 过滤出状态为3（审核通过）的数据
    const approvedOvertimeList = filteredOvertimeList.value.filter(
        (item: any) => item.jobOverTimeStatus === 3 && item.jobOverTimeIsPrint === 1
    );
    ids.value = approvedOvertimeList.map((item: any) => item.ID)
    if (!approvedOvertimeList || approvedOvertimeList.length === 0) {
        ElMessage.warning('没有可打印的已审核通过的加班申请单');
        return;
    }
    // 打印样式（保持原有字体大小）
    const style = `
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", Arial, sans-serif;
            line-height: 1;
            color: #000;
            font-size: 8px;
            height: 100%;
        }
        @page {
            size: A4;
            margin: 0.5cm;
        }
        .form-title {
            text-align: center;
            font-size: 18px;
            margin: 10px 0;
        }
        .form-table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }
        .form-table td {
            border: 1px solid #000;
            padding: 6px;
            font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", Arial, sans-serif;
            font-size: 10px;
        }
        .form-notes {
            font-size: 14px;
            line-height: 1.3;
        }
        .overtime-form {
            margin-bottom: 10px;
        }
        .page-container {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }
        .page-break {
            page-break-after: always;
        }
        .no-break {
            page-break-inside: avoid;
        }
        .form-group {
            flex-grow: 1;
        }
    `;

    // 构建单个表单的HTML
    const buildSingleForm = (item: any) => {
        return `
            <div class="overtime-form no-break">
                <p class="form-title">公司加班申请单</p>
                <table class="form-table" border="1" cellspacing="0" cellpadding="3">
                 <colgroup>
                    <col style="width: 18%" />
                    <col style="width: 32%" />
                    <col style="width: 15%" />
                    <col style="width: 35%" />
                  </colgroup>
                    <tbody>
                        <tr>
                            <td class="form-label">部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门</td>
                            <td>${item.departmentName || ''}</td>
                            <td class="form-label">加班申请人</td>
                            <td>${item.userName || ''}</td>
                        </tr>
                        <tr>
                            <td class="form-label">加班事由</td>
                            <td colspan="3" class="form-value">${item.jobOverTimeReason || ''}</td>
                        </tr>
                        <tr>
                            <td colspan="3" class="form-label">加班内容</td>
                            <td colspan="1" class="form-label">加班结果</td>
                        </tr>
                        ${(item.jobOverTimeList || []).map((jt: any, idx: any) => `
                            <tr>
                                <td colspan="3">${idx + 1}、 ${jt.jobOverTimeListName || ''}</td>
                                <td colspan="1">${idx + 1}、 ${jt.jobOverTimeContent || ''}</td>
                            </tr>
                        `).join('')}
                        <tr>
                            <td class="form-label">预计加班时间</td>
                            <td colspan="2" class="form-value">${formatDateTime(item.jobOverTimeBeginTime)} - ${formatDateTime(item.jobOverTimeEndTime)}</td>
                            <td rowspan="1">共计 ${item.jobOverTimeLong || 0} 时</td>
                        </tr>
                        <tr>
                            <td class="form-label">部门经理核准工时</td>
                            <td>${item.approvedHours ? `${item.approvedHours}小时` : `未核准`}</td>
                            <td rowspan="2" class="form-label">分管部门领导</td>
                            <td rowspan="2" class="form-value">${item.signature ? `<img v-if="false" src="${item.signature}" alt="签名"
                                                    style="max-width: 100px;max-height: 52px;object-fit: contain"
                                                    class="signature-image" />` : ``}</td>
                        </tr>
                        <tr>
                            <td class="form-label">实际考勤打卡时间</td>
                            <td colspan="2" class="form-value"></td>
                        </tr>
                        <tr>
                            <td colspan="4" class="form-notes">
                                说明：<br>
                                1、部门经理要核实是否需要加班并签字确认核准工时<br>
                                2、综合部月底统计考勤，逾期未交本表，不做加班处理。<br>
                                3、经审批的"加班申请单"核查考勤无误后作为加班调休的唯一依据。<br>
                                4、实际加班时间综合部以实际打卡记录为准。<br>
                                5、加班内容写得粗糙无内容、并且没有实际加班成果，一律不得计入加班时间。
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        `;
    };

    // 构建打印内容，精确利用页面空间
    const buildPrintContent = () => {
        let content = '';
        let currentPageForms: any[] = [];

        // 创建隐藏的测量容器
        const measureContainer = document.createElement('div');
        measureContainer.style.position = 'fixed';
        measureContainer.style.left = '-9999px';
        measureContainer.style.visibility = 'hidden';
        measureContainer.style.width = '210mm'; // A4宽度
        document.body.appendChild(measureContainer);

        // 测量页面剩余空间
        const getRemainingSpace = () => {
            measureContainer.innerHTML = `
                <div class="page-container">
                    ${currentPageForms.map(form => buildSingleForm(form)).join('')}
                    <div id="measure-space" style="height: 1px;"></div>
                </div>
            `;
            const container = measureContainer.querySelector('.page-container') as HTMLElement;
            return 10000 - container.scrollHeight;
        };

        for (let i = 0; i < approvedOvertimeList.length; i++) {
            const form = approvedOvertimeList[i];

            // 测量当前表单高度
            measureContainer.innerHTML = `
                <div class="page-container">
                    ${buildSingleForm(form)}
                </div>
            `;
            const formHeight = measureContainer.offsetHeight;

            // 计算当前页剩余空间
            const remainingSpace = currentPageForms.length > 0 ? getRemainingSpace() : 10000;
            if (currentPageForms.length === 0 || formHeight <= remainingSpace) {
                // 可以加入当前页
                currentPageForms.push(form);
            } else {
                // 不能加入当前页，先输出当前页
                content += `
                    <div class="page-container">
                        ${currentPageForms.map(f => buildSingleForm(f)).join('')}
                    </div>
                    <div class="page-break"></div>
                `;

                // 开始新页
                currentPageForms = [form];
            }
        }

        // 输出最后一页
        if (currentPageForms.length > 0) {
            content += `
                <div class="page-container">
                    ${currentPageForms.map(f => buildSingleForm(f)).join('')}
                </div>
            `;
        }

        // 移除测量容器
        document.body.removeChild(measureContainer);

        return content;
    };

    // 创建打印窗口
    const printWindow = window.open('', '_blank');
    if (printWindow) {
        printWindow.document.write(`
            <html>
                <head>
                    <title>加班申请单打印</title>
                    <style>${style}</style>
                </head>
                <body>
                    ${buildPrintContent()}
                </body>
            </html>
        `);
        printWindow.document.close();

        printWindow.onload = () => {
            // 添加打印事件监听
            printWindow.addEventListener('afterprint', () => {
                ElMessageBox.confirm('是否完成打印? 只能打印一次哦😊', '提示', {
                    type: 'warning',
                    cancelButtonText: '未打印',
                    confirmButtonText: '打印完成',
                }).then(() => {
                    printWindow.close();
                    ElMessage.success('打印流程已完成');
                    printJobOverTimeStatus();
                }).catch(() => {
                    printWindow.close();
                    ElMessage.info('您已取消打印');
                });
                printWindow.close(); // 可选：自动关闭打印窗口
            });
            setTimeout(() => {
                try {
                    printWindow.print();
                } catch (e) {
                    console.error('打印失败:', e);
                    printWindow.close();
                    ElMessage.error('打印失败，请重试');
                }
            }, 500);
        };
    } else {
        ElMessage.error('无法打开打印窗口，请检查浏览器设置');
    }
};

// 更新申请单打印状态
const printJobOverTimeStatus = async () => {
    const { data } = await PrintJobOverTimeStatus({
        "ids": ids.value
    });
    if (data.code == 200) {
        ElMessage.success(data.msg)
        getJobOverTimeList();
    } else {
        ElMessage.error(data.msg)
    }
}


// 审核列表过滤条件
const statusFilter = ref(0);
const applicantFilterUUID = ref('');
const departmentFilter = ref(0); // 新增部门过滤条件，0表示全部
const departmentOptions = [
    { label: '全部', value: 0 },
    { label: '研发', value: 1 },
    { label: '测试', value: 2 },
    { label: '项目', value: 3 },
    { label: '其他', value: 4 }
];

// 导出相关状态
const exportDialogVisible = ref(false);
const exportMonth = ref('');

const statusFilterHandler = async (jobStatus: number) => {
    statusFilter.value = jobStatus;
    resetPagination(); // 重置分页状态
    auditTableLoading.value = true; // 添加loading状态
    try {
        await getAuditJobOverTimeList();
    } finally {
        auditTableLoading.value = false; // 结束loading状态
    }
} // 状态过滤

// 部门过滤处理
const departmentFilterHandler = async (department: number) => {
    departmentFilter.value = department;
    resetPagination(); // 重置分页状态
    auditTableLoading.value = true; // 添加loading状态
    try {
        await getAuditJobOverTimeList();
    } finally {
        auditTableLoading.value = false; // 结束loading状态
    }
}

// 新增的响应式变量
const applicantFilter = ref('全部');
// const applicantFiltersCollapsed = ref(false); // duplicate declaration removed
// 根据按钮搜索记录默认全部
const applicantFilterHander = async (typeStr: any) => {

    if (typeStr == '全部') {
        applicantFilter.value = typeStr;
        applicantFilterUUID.value = '';
    } else {
        applicantFilter.value = typeStr.userName
        applicantFilterUUID.value = typeStr.userUUID
    }
    resetPagination(); // 重置分页状态
    auditTableLoading.value = true; // 添加loading状态
    try {
        await getAuditJobOverTimeListByUUID();
    } finally {
        auditTableLoading.value = false; // 结束loading状态
    }
}


// 根据UUID获取加班申请单(管理员)
const filteredPendingApprovalList = ref<any[]>([]);
// 分页相关变量
const currentPage = ref(1);
const pageSize = ref(20); // 首次加载20条
const loadMoreSize = ref(5); // 后续每次加载5条
const hasMore = ref(true);
const loading = ref(false);

// 懒加载优化：添加防抖和更精确的滚动监听
const scrollDebounceTimer = ref<number | null>(null);
const scrollThreshold = ref(20); // 降低触发阈值，提高灵敏度
const isScrolling = ref(false);
const lastScrollTime = ref(0);
const scrollThrottleDelay = 16; // 约60fps的滚动节流
const isLoadingMore = ref(false); // 防止重复加载的标志
const lastLoadTime = ref(0); // 记录上次加载时间
const minLoadInterval = 500; // 最小加载间隔500ms，提高响应性
const isScrollTriggered = ref(false); // 防止滚动重复触发的标志

const getAuditJobOverTimeListByUUID = async (isLoadMore = false) => {
    if (loading.value || (isLoadMore && isLoadingMore.value)) return; // 防止重复请求
    
    if (isLoadMore) {
        isLoadingMore.value = true; // 设置懒加载标志
    } else {
        loading.value = true; // 首次加载或筛选
    }
    
    try {
        // 确定当前请求的页面大小
        const requestPageSize = isLoadMore ? loadMoreSize.value : pageSize.value;
        
        const params = {
            uuid: applicantFilterUUID.value,
            jobOverTimeStatus: statusFilter.value,
            department: departmentFilter.value,
            startDate: dateRange.value[0],
            endDate: dateRange.value[1],
            page: currentPage.value,
            pageSize: requestPageSize
        };
        
        // 请求参数已记录
        
        const { data } = await GetAuditJobOverTimeListByUUID(params);
        
        if (data.code == 200) {
            if (isLoadMore) {
                // 懒加载：追加数据
                filteredPendingApprovalList.value = [...filteredPendingApprovalList.value, ...data.data];
            } else {
                // 首次加载或筛选：替换数据
                filteredPendingApprovalList.value = data.data;
                currentPage.value = 1; // 重置页码
            }
            
            // 判断是否还有更多数据
            const hasMoreData = data.data.length === requestPageSize;
            hasMore.value = hasMoreData;
            
            // 如果加载成功且有数据，页码+1
            if (data.data.length > 0) {
                currentPage.value++;
            }
            
            // 数据加载完成
        } else {
            ElMessage.error(data.msg);
        }
    } catch (error) {
        ElMessage.error('加载数据失败，请稍后重试');
        console.error(error);
    } finally {
        if (isLoadMore) {
            isLoadingMore.value = false; // 重置懒加载标志
            isScrollTriggered.value = false; // 重置滚动触发标志
            // 懒加载完成，状态已重置
            
            // 如果还有更多数据，重新设置滚动监听器（防止表格重新渲染后监听器失效）
            if (hasMore.value) {
                setTimeout(() => {
                    setupTableScrollListener();
                }, 500);
            }
        } else {
            loading.value = false; // 重置首次加载标志
        }
    }
}



// 加载更多数据
const loadMoreData = async () => {
    const now = Date.now();
    
    // 多重检查：状态、时间间隔
    // 检查基本状态
    if (!hasMore.value) {
        return;
    }
    
    if (loading.value) {
        return;
    }
    
    // 检查懒加载状态（允许重复调用，因为滚动事件可能多次触发）
    if (isLoadingMore.value) {
        return;
    }
    
    // 检查时间间隔，防止频繁调用
    if (now - lastLoadTime.value < minLoadInterval) {
        return;
    }
    
    lastLoadTime.value = now; // 记录本次加载时间
    await getAuditJobOverTimeListByUUID(true);
}

// 重置分页状态
const resetPagination = () => {
    currentPage.value = 1;
    hasMore.value = true;
    filteredPendingApprovalList.value = [];
    isLoadingMore.value = false; // 重置懒加载状态
    isScrollTriggered.value = false; // 重置滚动触发标志
    lastLoadTime.value = 0; // 重置加载时间
    // 清理防抖定时器
    if (scrollDebounceTimer.value) {
        clearTimeout(scrollDebounceTimer.value);
        scrollDebounceTimer.value = null;
    }
}

// 查找表格滚动容器的函数
const findTableScrollContainer = () => {
    if (!auditTableRef.value) return null;
    
    const tableEl = auditTableRef.value.$el;
    
    // 按优先级查找滚动容器
    const scrollContainer = 
        tableEl.querySelector('.el-scrollbar__wrap') ||           // Element Plus 滚动条容器
        tableEl.querySelector('.el-table__body-wrapper') ||      // 表格体包装器
        tableEl.querySelector('.el-table__body') ||              // 表格体
        tableEl;                                                // 表格元素本身
    
    // 滚动容器查找结果
    
    return scrollContainer;
};

// 优化的表格滚动监听器设置
const setupTableScrollListener = () => {
    // 延迟设置，确保表格组件已完全渲染
    setTimeout(() => {
        // 查找并监听表格内部的滚动容器
        const scrollContainer = findTableScrollContainer();
        
        if (scrollContainer) {
            // 移除旧的监听器
            scrollContainer.removeEventListener('scroll', handleTableScroll);
            // 添加新的监听器
            scrollContainer.addEventListener('scroll', handleTableScroll, { passive: true });
            
            // 测试滚动容器是否可滚动
            const isScrollable = scrollContainer.scrollHeight > scrollContainer.clientHeight;
        } else {
            // 未找到表格滚动容器
        }
        
        // 备用方案：在表格容器上监听滚动（已移除，因为不再需要外部滚动条）
    }, 1500); // 增加延迟，确保表格完全渲染
}

// 优化的表格滚动事件处理
const handleTableScroll = (event: Event) => {
    // 获取触发滚动的元素
    const scrollElement = event.target as HTMLElement;
    
    if (loading.value) {
        return;
    }
    
    if (!hasMore.value) {
        return;
    }
    
    const now = Date.now();
    
    // 节流处理：限制滚动事件触发频率
    if (now - lastScrollTime.value < scrollThrottleDelay) {
        return;
    }
    lastScrollTime.value = now;
    
    // 获取滚动容器的尺寸信息
    const { scrollTop, scrollHeight, clientHeight } = scrollElement;
    
    // 计算距离底部的距离
    const distanceToBottom = scrollHeight - scrollTop - clientHeight;
    
    // 滚动事件触发
    
    // 当滚动到底部附近时（距离底部20px内）触发加载更多
    if (distanceToBottom <= scrollThreshold.value) {
        // 检查是否已经在加载中
        if (isLoadingMore.value) {
            return;
        }
        
        // 检查是否已经触发过（防止重复触发）
        if (isScrollTriggered.value) {
            return;
        }
        
        // 设置触发标志，防止重复触发
        isScrollTriggered.value = true;
        
        // 使用防抖，避免频繁触发
        if (scrollDebounceTimer.value) {
            clearTimeout(scrollDebounceTimer.value);
        }
        
        scrollDebounceTimer.value = setTimeout(() => {
            // 再次检查状态
            if (loading.value || isLoadingMore.value || !hasMore.value) {
                isScrollTriggered.value = false; // 重置触发标志
                return;
            }
            
            // 调用加载函数
            loadMoreData();
        }, 150); // 减少防抖延迟到150ms，提高响应性
    } else {
        // 如果不在底部附近，重置触发标志，允许下次触发
        if (isScrollTriggered.value && distanceToBottom > scrollThreshold.value + 50) {
            isScrollTriggered.value = false;
        }
    }
}

// 清理防抖定时器
const clearScrollDebounce = () => {
    if (scrollDebounceTimer.value) {
        clearTimeout(scrollDebounceTimer.value);
        scrollDebounceTimer.value = null;
    }
}

// 重置懒加载状态
const resetLazyLoadState = () => {
    isLoadingMore.value = false;
    isScrollTriggered.value = false;
    lastLoadTime.value = 0;
    clearScrollDebounce();
}

// 优化的滚动监听器清理
const cleanupScrollListener = () => {
    // 清理表格内部滚动监听器
    if (auditTableRef.value) {
        const scrollContainer = findTableScrollContainer();
        if (scrollContainer) {
            scrollContainer.removeEventListener('scroll', handleTableScroll);
        }
    }
    
    clearScrollDebounce();
    resetLazyLoadState();
}

// 计算属性 - 获取所有待审核列表(用于统计总数)
const pendingApprovalListAll = () => {
    return applicantOptions.value.reduce((sum, item) => {
        return sum + (item.count || 0);
    }, 0);
};

// 导出相关函数
const showExportDialog = () => {
    exportMonth.value = new Date().toISOString().slice(0, 7); // 默认选择当前月份
    exportDialogVisible.value = true;
};

const handleExport = async () => {
    if (!exportMonth.value) {
        ElMessage.warning('请选择要导出的月份');
        return;
    }

    let exportLoading: any = null;
    try {
        exportLoading = ElLoading.service({
            lock: true,
            text: '正在导出数据...',
            background: 'rgba(0, 0, 0, 0.7)'
        });

        const response = await ExportOverTime({
            dailyTime: exportMonth.value
        });

        // 从响应头获取文件名
        const contentDisposition = response.headers['content-disposition'];
        let fileName = `加班申请审核列表_${exportMonth.value}.xlsx`; // 默认文件名

        if (contentDisposition) {
            // 处理可能的中文文件名（后端需要做URL编码）
            const fileNameMatch = contentDisposition.match(/filename\*?=(?:UTF-8'')?([^;]+)/i);
            if (fileNameMatch && fileNameMatch.length > 1) {
                fileName = decodeURIComponent(fileNameMatch[1]);
            }
        }

        // 创建下载链接
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();

        // 清理
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);

        ElMessage.success('导出成功');
        exportDialogVisible.value = false;
    } catch (error) {
        ElMessage.error('导出失败，请稍后重试');
        console.error('导出失败:', error);
    } finally {
        if (exportLoading) {
            exportLoading.close();
        }
    }
};

// 初始化日期范围
onMounted(() => {
    dateRange.value = getCurrentMonthRange();
    getSelfOverTimeCount();
});

// 获取申请人选项及其待审核数量
const applicantOptions = ref([{
    'userName': '',
    'count': 0,
    'userUUID': '',
}]);


interface reasonOption {
    requirementId: number;
    jobOverTimeListName: string;
    jobOverTimeContent: string; // 每条加班项的详细内容
}

interface OvertimeForm {
    jobOverTimeReason: string; // 新增的加班事由字段
    jobOverTimeContent: string;
    jobOverTimeList: reasonOption[];
    jobOverTimeBeginTime: Date | null;
    jobOverTimeEndTime: Date | null;
    duration: string;
}

interface OvertimeRecord {
    ID: number; // 添加ID属性
    jobOverTimeReason: string; // 新增的加班事由字段
    departmentName: string; // 部门
    jobOverTimeContent: string;//加班原因
    jobOverTimeList: reasonOption[];//加班事由
    jobOverTimeBeginTime: Date;
    jobOverTimeEndTime: Date;
    userName: string;
    jobOverTimeLong: string;
    bossUserName: string;
    approvalComment: string;
    signature: string;
    createAt: Date;
    bossAuditTime: Date;
    duration: string;
    jobOverTimeStatus: number;
    approvedHours: number; // 新增：核准工时字段
}

const editingId = ref<number | null>(null); // 新增：正在编辑的ID

const formData = ref<OvertimeForm>({
    jobOverTimeReason: '', // 新增的加班事由字段
    jobOverTimeContent: '',
    jobOverTimeList: [],
    jobOverTimeBeginTime: null,
    jobOverTimeEndTime: null,
    duration: '',
});

const selectedReason = ref<string>('');
const reasonOptions = ref<reasonOption[]>([]);

const duration = computed(() => {
    if (!formData.value.jobOverTimeBeginTime || !formData.value.jobOverTimeEndTime) return '';
    const start = new Date(formData.value.jobOverTimeBeginTime).getTime();
    const end = new Date(formData.value.jobOverTimeEndTime).getTime();

    if (end < start) return '结束时间不能早于开始时间';

    const hours = (end - start) / (1000 * 60 * 60);
    return `${hours.toFixed(1)} 小时`;
});

// 计算加班总时长
const totalOvertimeHours = computed(() => {
    if (!filteredOvertimeList.value || filteredOvertimeList.value.length === 0) return '0.0';
    const total = filteredOvertimeList.value.reduce((sum: number, item: any) => {
        return sum + (parseFloat(item.jobOverTimeLong) || 0);
    }, 0);
    return total.toFixed(1);
});

const approvalVisible = ref(false);
const currentApprovalItem = ref<OvertimeRecord | null>(null);
const detailVisible = ref(false);
const currentDetailItem = ref<OvertimeRecord>({
    ID: 0, // 添加ID属性
    approvedHours: 0,
    jobOverTimeReason: '', // 新增字段
    departmentName: '', // 新增字段部门
    jobOverTimeContent: '',
    bossUserName: '',
    bossAuditTime: new Date("2016-05-04"),
    jobOverTimeList: [],//加班事由
    jobOverTimeBeginTime: new Date("2016-05-04"),
    jobOverTimeEndTime: new Date("2016-05-04"),
    userName: '',
    approvalComment: '',
    jobOverTimeLong: '',
    signature: '',
    createAt: new Date("2016-05-04"),
    jobOverTimeStatus: 0,
    duration: '',
});

// 获取当前月的第一天和最后一天
const getCurrentMonthRange = () => {
    const now = new Date();
    const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
    const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);

    // 格式化为YYYY-MM-DD
    const format = (date: Date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    };

    return [format(firstDay), format(lastDay)];
};

const dateRange = ref(getCurrentMonthRange());
const filteredOvertimeList = ref();//申请列表
const getJobOverTimeList = async () => {
    // 获取所有申请记录，不按日期过滤
    const { data } = await GetJobOverTimeList({});
    if (data.code == 200) {
        filteredOvertimeList.value = data.data
    } else {
        ElMessage.error(data.msg)
    }
}


const getSummaries = (param: any) => {
    const { columns, data } = param;
    const sums: string[] = [];
    columns.forEach((column: any, index: number) => {
        if (index === 0) {
            sums[index] = '合计';
            return;
        }
        if (column.property === 'jobOverTimeLong') {
            // 计算所有记录的时长总和
            const totalHours = data.reduce((sum: number, item: any) => {
                return sum + (parseFloat(item.jobOverTimeLong) || 0);
            }, 0);
            sums[index] = `${totalHours.toFixed(1)} 小时`;
        } else {
            sums[index] = '';
        }
    });
    return sums;
};
// 获取审核列表对应人的申请数量
const getAuditJobOverTimeList = async () => {
    const params = {
        jobOverTimeStatus: statusFilter.value,
        department: departmentFilter.value,
        startDate: dateRange.value[0],
        endDate: dateRange.value[1]
    };
    const { data } = await GetAuditJobOverTimeList(params);
    if (data.code == 200) {
        applicantOptions.value = data.data;
        getAuditJobOverTimeListByUUID();
    } else {
        ElMessage.error(data.msg)
    }
}

const handleTabsClick = async (tab: any) => {
    if (tab.props.label == '申请列表') {
        getJobOverTimeList();
    } else if (tab.props.label == '审核列表') {
        auditTableLoading.value = true; // 添加loading状态
        try {
            await getAuditJobOverTimeList();
            // 切换到审核列表时，确保滚动监听器已设置
            await nextTick();
            setTimeout(() => {
                setupTableScrollListener();
            }, 500);
        } finally {
            auditTableLoading.value = false; // 结束loading状态
        }
    }
}


// 处理审核列表日期范围变化
const handleAuditDateRangeChange = async () => {
    // 重置分页状态
    resetPagination();
    // 更新审核列表数据
    auditTableLoading.value = true; // 添加loading状态
    try {
        await getAuditJobOverTimeList();
    } finally {
        auditTableLoading.value = false; // 结束loading状态
    }
}

// 组件卸载时清理滚动监听器
onUnmounted(() => {
    cleanupScrollListener();
    cleanupFormScrollListener();
});

// 清理表单滚动监听器
const cleanupFormScrollListener = () => {
    const formScrollContainer = document.querySelector('.form-scroll-container');
    if (formScrollContainer) {
        formScrollContainer.removeEventListener('scroll', handleFormScroll);
    }
};


function addReason() {
    if (!selectedReason.value) return;

    if (!formData.value.jobOverTimeList.some(item => item.jobOverTimeListName === selectedReason.value)) {
        const existingReason = reasonOptions.value.find(option => option.jobOverTimeListName === selectedReason.value);
        if (existingReason) {
            formData.value.jobOverTimeList.push({
                ...existingReason,
                jobOverTimeContent: ''  // 确保添加content属性
            });
        } else {
            const newReason = {
                requirementId: 0,
                jobOverTimeListName: selectedReason.value,
                jobOverTimeContent: ''  // 确保添加content属性
            };
            formData.value.jobOverTimeList.push(newReason);
        }
    }

    selectedReason.value = '';
}

// 自动添加加班项目
function autoAddReason(value: string) {
    if (!value) return;
    
    // 检查是否已经添加过
    if (!formData.value.jobOverTimeList.some(item => item.jobOverTimeListName === value)) {
        const existingReason = reasonOptions.value.find(option => option.jobOverTimeListName === value);
        if (existingReason) {
            formData.value.jobOverTimeList.push({
                ...existingReason,
                jobOverTimeContent: ''
            });
        } else {
            const newReason = {
                requirementId: 0,
                jobOverTimeListName: value,
                jobOverTimeContent: ''
            };
            formData.value.jobOverTimeList.push(newReason);
        }
    }
    
    // 清空选择框
    selectedReason.value = '';
}

function removeReason(index: number) {
    formData.value.jobOverTimeList.splice(index, 1);
}

function calculateDuration() {
    if (!formData.value.jobOverTimeBeginTime || !formData.value.jobOverTimeEndTime) return;
    if (formData.value.jobOverTimeEndTime < formData.value.jobOverTimeBeginTime) {
        formData.value.jobOverTimeEndTime = formData.value.jobOverTimeBeginTime;
        ElMessage.warning('结束时间不能早于开始时间');
    }
}


function getStatusType(status: number) {
    const statusMap: Record<number, string> = {
        1: 'warning',
        3: 'success',
        2: 'danger',
    };
    return statusMap[status];
}
function getStatusName(status: number) {
    const statusMap: Record<number, string> = {
        1: '待审核',
        3: '审核通过',
        2: '审核未通过',
    };
    return statusMap[status];
}

// submitForm函数
async function submitForm() {
    // 验证必填项
    if (!formData.value.jobOverTimeReason ||
        !formData.value.jobOverTimeList.length ||
        !formData.value.jobOverTimeBeginTime ||
        !formData.value.jobOverTimeEndTime) {
        ElMessage.error('请填写完整的加班信息');
        return;
    }

    // 检查每条加班项是否都填写了详细内容
    const hasEmptyContent = formData.value.jobOverTimeList.some(item => !item.jobOverTimeContent);
    if (hasEmptyContent) {
        ElMessage.error('请填写所有加班项的详细内容');
        return;
    }
    // 准备提交数据（确保包含id）
    const submitData = {
        jobOverTimeReason: formData.value.jobOverTimeReason, // 新增字段
        jobOverTimeList: formData.value.jobOverTimeList.map(item => ({
            requirementId: item.requirementId,
            jobOverTimeListName: item.jobOverTimeListName,
            jobOverTimeContent: item.jobOverTimeContent
        })),
        jobOverTimeBeginTime: formData.value.jobOverTimeBeginTime,
        jobOverTimeEndTime: formData.value.jobOverTimeEndTime,
        duration: duration.value
    };

    try {
        if (editingId.value) {
            // 更新现有记录
            const { data } = await UpdateJobOverTime({
                id: editingId.value,
                ...submitData
            });
            if (data.code === 200) {
                ElMessage.success(data.msg);
                resetForm();
                getJobOverTimeList(); // 刷新列表
            } else {
                ElMessage.error(data.msg);
            }
        } else {
            // 新增记录
            const { data } = await CreateJobOverTime(submitData);
            if (data.code === 200) {
                ElMessage.success(data.msg);
                resetForm();
                getJobOverTimeList(); // 刷新列表
            } else {
                ElMessage.error(data.msg);
            }
        }
    } catch (error) {
        ElMessage.error('提交失败，请稍后重试');
        console.error(error);
    }
}


function resetForm() {
    formData.value = {
        jobOverTimeReason: '', // 新增字段
        jobOverTimeContent: '',
        jobOverTimeList: [],
        jobOverTimeBeginTime: null,
        jobOverTimeEndTime: null,
        duration: '',
    };
    editingId.value = null;
}

function editOvertime(row: any) {
    // 跳转到加班申请标签页
    activeTab.value = '0'; // 直接修改 activeTab 的值来切换标签页
    // 填充表单数据
    formData.value = {
        jobOverTimeReason: row.jobOverTimeReason,
        jobOverTimeContent: row.jobOverTimeContent,
        jobOverTimeList: [...row.jobOverTimeList],
        jobOverTimeBeginTime: row.jobOverTimeBeginTime,
        jobOverTimeEndTime: row.jobOverTimeEndTime,
        duration: row.duration,
    };
    editingId.value = row.ID;
}

function cancelEdit() {
    resetForm();
    activeTab.value = '1'; // 返回到申请列表标签页
}



// 作废加班申请单
const voidedJobOverTimeList = async (id: number) => {
    const { data } = await VoidedJobOverTimeList(id)
    if (data.code == 200) {
        getJobOverTimeList();
    } else {
        ElMessage.error(data.msg)
    }
}
function withdrawOvertime(row: any) {
    ElMessageBox.confirm('作废后就找不到了呦 😊', '提示', {
        type: 'warning',
    }).then(() => {
        voidedJobOverTimeList(row.ID)
    });
}

// 查询加班单详情
const getJobOverTimeById = async (id: number) => {
    const { data } = await GetJobOverTimeById(id);
    if (data.code == 200) {
        currentDetailItem.value = data.data;
        detailVisible.value = true;
    } else {
        ElMessage.error(data.msg)
    }
}

// 查看加班申请单
function showDetailDialog(row: OvertimeRecord) {
    currentDetailItem.value = row;
    getJobOverTimeById(row.ID)
}


// 显示审核弹框
function showApprovalDialog(row: OvertimeRecord) {
    currentDetailItem.value.signature = '';
    currentDetailItem.value = row;
    currentApprovalItem.value = row;
    approvalVisible.value = true;
    currentDetailItem.value.approvalComment = '';
    currentDetailItem.value.jobOverTimeStatus = row.jobOverTimeStatus;
}

const signatureCanvas = ref<HTMLCanvasElement | null>(null);

// 直接签名
const getAuditJobOverTimeMySign = async () => {
    if (!currentDetailItem.value.signature) {
        const { data } = await GetAuditJobOverTimeMySign();
        if (data.code == 200) {
            currentDetailItem.value.signature = data.data;
            ElMessage.success(data.msg);
        } else {
            ElMessage.error(data.msg);
        }
    } else {
        ElMessage.error('不要重复签字');
    }
}


// 获取本人未提交加班申请的需求
const getSelfOverTimeCount = async () => {
    userAuthId.value = localStorage.getItem("authorityId");
    const { data } = await GetSelfOverTimeCount()
    if (data.code == 200) {
        reasonOptions.value = data.data.map((item: any) => ({
            requirementId: item.requirementId,
            jobOverTimeListName: item.requirementName
        }))
    } else {
        ElMessage.error(data.msg)
    }
}

// 初始化签名画布
onMounted(() => {

    getSelfOverTimeCount();//获取本人未提交加班申请的需求

    if (signatureCanvas.value) {
        const ctx = signatureCanvas.value.getContext('2d');
        if (ctx) {
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 2;
            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';
        }
    }
    
    // 添加表格滚动监听器
    setTimeout(() => {
        setupTableScrollListener();
    }, 1000);
    
    // 添加表单滚动监听器
    setupFormScrollListener();
});

// 设置表单滚动监听器
const setupFormScrollListener = () => {
    nextTick(() => {
        const formScrollContainer = document.querySelector('.form-scroll-container');
        if (formScrollContainer) {
            formScrollContainer.addEventListener('scroll', handleFormScroll);
        }
    });
};

// 处理表单滚动事件
const handleFormScroll = (event: Event) => {
    const target = event.target as HTMLElement;
    const { scrollTop, scrollHeight, clientHeight } = target;
    
    // 添加滚动位置指示类
    target.classList.toggle('scrolled-top', scrollTop > 10);
    target.classList.toggle('scrolled-bottom', scrollTop + clientHeight < scrollHeight - 10);
};

// 申请列表状态过滤
const appStatusFilter = ref(0); // 0=全部 1=待审核 2=未通过 3=通过
const applicationFilteredList = computed(() => {
  const list = filteredOvertimeList?.value || [];
  if (!appStatusFilter.value) return list;
  return list.filter((it: any) => it.jobOverTimeStatus === appStatusFilter.value);
});
const appStatusFilterHandler = (v: number) => { appStatusFilter.value = v; };
const appFiltersCollapsed = ref(false);

// 确保申请列表过滤条件默认收起
onMounted(() => {
  appFiltersCollapsed.value = false;
});

// 确保审核列表过滤条件默认收起
onMounted(() => {
  applicantFiltersCollapsed.value = true;
});

const applicantFiltersCollapsed = ref(true);
</script>

<style scoped>
/* 主容器样式 */
.overtime-container {
  min-height: 100vh;
}

/* 页面标题样式 */
.page-header {
  text-align: center;
  margin-bottom: 30px;
  color: white;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  font-weight: 300;
}

/* 主内容区域 */
.main-content {
  width: 100%;
  margin: 0;
}

/* 现代化标签页样式 */
.modern-tabs {
  background: white;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  width: 100%;
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.modern-tabs :deep(.el-tabs__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.modern-tabs :deep(.el-tabs__header)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}

.modern-tabs :deep(.el-tabs__nav-wrap) {
  padding: 8px 0;
  display: flex;
  justify-content: flex-start;
}

.modern-tabs :deep(.el-tabs__nav) {
  display: flex;
  justify-content: flex-start;
  gap: 0;
}

.modern-tabs :deep(.el-tabs__item) {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  font-size: 16px;
  padding: 24px 32px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  box-sizing: border-box;
  width: auto;
  margin: 0 4px;
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 12px 12px 0 0;
  letter-spacing: 0.5px;
}

.modern-tabs :deep(.el-tabs__item.is-active) {
  color: white;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 12px 12px 0 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  margin: 0 4px;
  padding: 24px 32px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.modern-tabs :deep(.el-tabs__item.is-active)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
}

.modern-tabs :deep(.el-tabs__active-bar) {
  display: none;
}

/* Tab悬停效果 */
.modern-tabs :deep(.el-tabs__item):hover {
  color: white;
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

/* Tab内容区域样式优化 */
.modern-tabs :deep(.el-tabs__content) {
  padding: 0;
  background: transparent;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .modern-tabs :deep(.el-tabs__item) {
    padding: 16px 20px;
    font-size: 14px;
  }
  
  .modern-tabs :deep(.el-tabs__header) {
    padding: 0 16px;
  }
}

/* Tab切换动画 */
.modern-tabs :deep(.el-tab-pane) {
  transition: all 0.3s ease;
}







/* 标签页内容 */
.tab-content {
  min-height: calc(100vh - 200px);
  height: calc(100vh - 200px);
}

/* 表单卡片样式 */
.form-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 25px 30px;
  text-align: center;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.card-subtitle {
  opacity: 0.9;
  font-size: 0.95rem;
}

/* 表单滚动容器样式 */
.form-scroll-container {
  height: 100%;
  overflow-y: auto;
  padding: 0;
  flex: 1;
  position: relative;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 滚动时的阴影效果 */
.form-scroll-container::before,
.form-scroll-container::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  height: 20px;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.form-scroll-container::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.9), transparent);
  opacity: 0;
}

.form-scroll-container::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(255,255,255,0.9), transparent);
  opacity: 0;
}

.form-scroll-container.scrolled-top::before {
  opacity: 1;
}

.form-scroll-container.scrolled-bottom::after {
  opacity: 1;
}

/* 自定义滚动条样式 */
.form-scroll-container::-webkit-scrollbar {
  width: 8px;
}

.form-scroll-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.form-scroll-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.form-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 表单样式 */
.overtime-form {
  padding: 30px;
  min-height: 100%;
}

.form-item {
  margin-bottom: 25px;
}

.form-item :deep(.el-form-item__label) {
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
  display: block;
  text-align: left;
}

/* 加班事由单选按钮样式 */
.reason-radio-group {
  width: 100%;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.reason-radio {
  margin-right: 0;
}

.reason-radio :deep(.el-radio__label) {
  font-weight: 500;
  color: #374151;
}

/* 加班事由单选按钮样式 */
.reason-radio-group {
  width: 100%;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.reason-radio {
  margin-right: 0;
}

.reason-radio :deep(.el-radio__label) {
  font-weight: 500;
  color: #374151;
}

/* 项目选择器样式 */
.project-selector {
  margin-bottom: 20px;
  display: block;
  width: 100%;
}

.project-input-row {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
}

.project-select {
  flex: 1;
}

.add-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

/* 已选项目样式 */
.selected-projects {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
  border: 2px dashed #e2e8f0;
  clear: both;
  width: 100%;
  min-height: 200px;
  max-height: 300px;
  overflow-y: auto;
}

.projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: nowrap;
}

.projects-title {
  font-weight: 600;
  color: #374151;
  font-size: 1.1rem;
}

.projects-count {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  align-self: flex-start;
}

.projects-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding-right: 10px;
}

.project-item {
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 10px;
}

.project-name {
  font-weight: 600;
  color: #374151;
  flex: 1;
  word-break: break-word;
  line-height: 1.4;
}

.remove-btn {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  transition: all 0.3s ease;
  flex-shrink: 0;
  min-width: 32px;
}

.remove-btn:hover {
  background: #fee2e2;
  transform: scale(1.1);
}

.project-content {
  width: 100%;
}

/* 空项目状态 */
.empty-projects {
  text-align: center;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  width: 100%;
  background: #f8fafc;
  border-radius: 12px;
  border: 2px dashed #e2e8f0;
  margin-top: 20px;
}

/* 时间选择器样式 */
.time-selector {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 20px;
  width: 100%;
  align-items: start;
}

/* 低屏幕高度时的时间选择器布局 */
@media (max-height: 600px) {
  .time-selector {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  
  .time-selector .time-item:nth-child(3),
  .time-selector .time-item:nth-child(4) {
    grid-column: span 1;
  }
}

@media (max-height: 500px) {
  .time-selector {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .time-selector .time-item {
    grid-column: span 1;
  }
}

.time-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-item.submit-item {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-top: 28px;
}

.time-label {
  font-weight: 600;
  color: #374151;
  font-size: 0.9rem;
}

.time-picker {
  width: 100%;
}

.duration-input {
  background: #f8fafc;
  width: 120px;
}

/* 表单操作按钮 */
.form-actions {
  text-align: center;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #e5e7eb;
}



.submit-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
}

.cancel-btn {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.cancel-btn:hover {
  background: #e5e7eb;
  transform: translateY(-2px);
}

/* 申请列表-头部(重写) */
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.header-left {
  display: flex;
  align-items: center;
}

.total-hours {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
}

.total-label {
  font-size: 14px;
  font-weight: 500;
}

.total-value {
  font-size: 18px;
  font-weight: 700;
}

.list-header > .header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.list-header > .header-right .date-filter { flex: 0 0 auto; }
.list-header > .header-right .print-btn { flex: 0 0 auto; white-space: nowrap; }
.list-header :deep(.el-date-editor) { 
  width: 280px !important; 
  height: 40px !important;
}

.list-header :deep(.el-input__wrapper) {
  height: 40px !important;
  font-size: 14px !important;
}

/* 打印按钮样式保留 */
.print-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s ease;
  height: 44px;
}

.print-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
}

/* 申请列表-卡片(重写) */
.overtime-list { 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 12px; 
  height: calc(100vh - 350px);
  min-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}
.empty-state { grid-column: 1 / -1; display:flex; justify-content:center !important; text-align:center; padding:40px 16px; background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.06); width:100%; }
.empty-state :deep(.el-empty) { margin: 0 auto; }

/* 滚动条样式 */
.overtime-list::-webkit-scrollbar {
  width: 6px;
}

.overtime-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.overtime-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.overtime-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.overtime-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.card-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  flex-wrap: nowrap;
  gap: 12px; 
  margin-bottom: 12px; 
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.header-left { display: flex; align-items: center; gap: 10px; }
.applicant-info { display: flex; align-items: center; gap: 8px; }
.applicant-avatar { 
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
  color:#fff; 
  font-weight:600;
  width: 32px;
  height: 32px;
  font-size: 14px;
}
.applicant-details { display:block; }
.applicant-name { font-weight:600; color:#374151; font-size: 14px; }
.applicant-time { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  color: #1e3a8a; 
  background: #e0f2fe; 
  border: 1px solid #93c5fd; 
  padding: 4px 10px; 
  border-radius: 999px; 
  font-size: .8rem; 
  font-weight: 600; 
  white-space: nowrap; 
  line-height: 1;
}
.applicant-time::before { 
  content: "📅"; 
  font-size: .9rem; 
  line-height: 1; 
  display: inline-block;
  transform: translateY(0); 
}
.reason-badge { display: flex; align-items: center; }
.status-badge { flex-shrink:0; }
/* 审核状态标签样式优化 */
.status-badge .el-tag,
.detail-status .el-tag {
  border-radius: 999px !important;
  padding: 4px 10px !important; /* match date/reason pills */
  line-height: 1 !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
/* 区分不同状态的配色微调（继承原有类型色） */
.status-badge .el-tag.el-tag--success,
.detail-status .el-tag.el-tag--success { filter: saturate(1.1) brightness(1.02); }
.status-badge .el-tag.el-tag--danger,
.detail-status .el-tag.el-tag--danger { filter: saturate(1.05) brightness(1.02); }
.status-badge .el-tag.el-tag--warning,
.detail-status .el-tag.el-tag--warning { filter: saturate(1.05) brightness(1.03); }

/* 升级后的加班事由标签样式 */
.reason-pill {
  --rp-bg: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  --rp-border: #93c5fd;
  --rp-text: #1e3a8a;
  background: var(--rp-bg) !important;
  border-color: var(--rp-border) !important;
  color: var(--rp-text) !important;
  border-width: 1px !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  line-height: 1 !important;
  height: auto !important;
  display: inline-flex;
  align-items: center;
  font-weight: 600 !important;
  letter-spacing: .2px;
  box-shadow: 0 4px 12px rgba(30, 58, 138, .12);
}
.reason-pill .el-tag__content { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; line-height: 1; }
.reason-pill::before { content: "🔥"; font-size: .9rem; }

/* 卡片头部右侧时间信息紧凑样式 */
.overtime-card .card-header .header-right {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

.overtime-card .card-header .time-info {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
}

.overtime-card .card-header .time-info .time-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 0.85rem;
  white-space: nowrap;
}

.overtime-card .card-header .duration-info { margin-top: 0; }
.overtime-card .card-header .status-badge { white-space: nowrap; }
.overtime-card .card-header .header-right { display:flex; align-items:center; gap:12px; }
.overtime-card .card-header .header-right .status-badge { margin-left: auto; }
.card-body { display: grid; gap: 12px; }
.overtime-reason .reason-title, .overtime-projects .projects-title { font-weight:600; color:#374151; margin-bottom:6px; }
.reason-text { color:#6b7280; line-height:1.5; background:#f9fafb; padding:10px; border-radius:8px; border-left:4px solid #667eea; }
.projects-grid { display:grid; grid-template-columns: 1fr; gap:12px; }
.project-card { background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px; padding:12px; }
.project-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.projects-header .el-button { white-space: nowrap; }
.project-index { background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; }
.project-name { font-weight:600; color:#374151; flex:1; word-break:break-word; }
.project-content { color:#6b7280; line-height:1.5; background:#fff; padding:8px; border-radius:6px; border:1px solid #e5e7eb; }
.card-footer .action-buttons { display:flex; justify-content:flex-end; gap:10px; }
.action-btn { border-radius:8px; font-weight:600; transition: all .2s ease; }
.action-btn:hover { transform: translateY(-1px); }
.edit-btn { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border:none; }
.withdraw-btn { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border:none; }
.view-btn { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); border:none; }
.empty-state { display:flex; justify-content:center !important; text-align:center; padding:40px 16px; background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.06); width:100%; }
.empty-state :deep(.el-empty) { margin: 0 auto; }

/* 表格容器 */
.table-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: calc(100vh - 350px);
  min-height: 400px;
  /* 移除外部滚动条，使用表格内部的滚动条 */
}

/* 优化表格内部滚动条样式 */
.audit-table :deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}

.audit-table :deep(.el-scrollbar__bar) {
  background-color: rgba(144, 147, 153, 0.3);
}

.audit-table :deep(.el-scrollbar__thumb) {
  background-color: rgba(144, 147, 153, 0.5);
  border-radius: 4px;
}

.audit-table :deep(.el-scrollbar__thumb:hover) {
  background-color: rgba(144, 147, 153, 0.7);
}

/* 懒加载状态指示器样式 */
.lazy-loading-indicator {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
  padding: 20px;
  text-align: center;
  border-radius: 0 0 16px 16px;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.loading-content .el-icon {
  font-size: 24px;
  color: #3b82f6;
  animation: spin 1s linear infinite;
}

.loading-content span {
  color: #3b82f6;
  font-size: 16px;
  font-weight: 500;
}

.loading-dots {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.loading-dots .dot {
  width: 8px;
  height: 8px;
  background-color: #3b82f6;
  border-radius: 50%;
  animation: dot-bounce 1.4s ease-in-out infinite both;
}

.loading-dots .dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dots .dot:nth-child(2) { animation-delay: -0.16s; }
.loading-dots .dot:nth-child(3) { animation-delay: 0s; }

@keyframes dot-bounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 懒加载行样式 */
.lazy-loading-row {
  background-color: #f8fafc;
}

.lazy-loading-cell {
  padding: 20px !important;
  text-align: center;
  border: none !important;
}

.row-loading-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #3b82f6;
}

.row-loading-content .el-icon {
  font-size: 18px;
  animation: spin 1s linear infinite;
}

.row-loading-content span {
  font-size: 14px;
  font-weight: 500;
}

/* 审核列表 - 顶部筛选区域布局优化 */
.audit-container .filter-toolbar { margin-bottom: 12px; }

/* 筛选标签样式优化 */
.filter-tag {
  margin: 0;
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
}

.filter-tag:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.filter-tag.is-checked {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .filter-row-split {
    flex-direction: column;
    gap: 24px;
  }
  
  .filter-left-section,
  .filter-right-section {
    min-width: auto;
  }
  
  .filter-row-unified {
    flex-direction: column;
    gap: 16px;
  }
  
  .filter-group-unified {
    flex: none;
    width: 100%;
    min-width: auto;
  }
  
  .date-picker-unified {
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .filter-toolbar {
    padding: 12px 16px;
  }
  
  .filter-section-compact {
    margin-bottom: 12px;
  }
  
  .filter-title {
    font-size: 0.9rem;
    margin-bottom: 8px;
  }
  
  .filter-btn-unified,
  .filter-btn-right {
    padding: 4px 8px;
    height: 24px;
    font-size: 0.8rem;
  }
  
  .date-picker-unified :deep(.el-input__wrapper),
  .date-picker-right :deep(.el-input__wrapper) {
    height: 28px !important;
  }
  
  .filter-row-split {
    gap: 20px;
  }
  
  .filter-right-section {
    gap: 16px;
  }
}

/* 折叠动画 */
.filter-collapse-enter-active,
.filter-collapse-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.filter-collapse-enter-from,
.filter-collapse-leave-to {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
}

.filter-collapse-enter-to,
.filter-collapse-leave-from {
  opacity: 1;
  transform: translateY(0);
  max-height: 200px;
}

/* 加班项样式 */
.overtime-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.overtime-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.item-index {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.item-name {
  color: #374151;
  font-weight: 500;
}

/* 加班内容样式 */
.overtime-contents {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.overtime-content {
  display: flex;
  gap: 8px;
}

.content-index {
  background: #f3f4f6;
  color: #6b7280;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.content-text {
  color: #374151;
  line-height: 1.5;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-btn {
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
}

.edit-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
}

.withdraw-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
}

.view-btn {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  border: none;
}

.audit-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
}

/* 审核容器样式 */
.audit-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 加载更多提示区域样式 */
.load-more-container {
  padding: 20px;
  text-align: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 16px 16px;
}

.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #3b82f6;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.loading-more .el-icon {
  font-size: 18px;
  animation: spin 1s linear infinite;
}

.no-more-data {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #10b981;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.no-more-data .el-icon {
  font-size: 16px;
  color: #10b981;
}

.load-more-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #6b7280;
  font-size: 14px;
  padding: 12px 20px;
  background: rgba(107, 114, 128, 0.05);
  border-radius: 8px;
  border: 1px dashed #d1d5db;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 加载进度条样式 */
.loading-progress {
  margin-top: 12px;
  width: 100%;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(59, 130, 246, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 2px;
  animation: progress-animation 2s ease-in-out infinite;
}

@keyframes progress-animation {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

/* 滚动提示样式 */
.scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0;
  padding: 6px 12px;
  background: rgba(107, 114, 128, 0.1);
  border-radius: 6px;
  color: #6b7280;
  font-size: 12px;
  animation: bounce 2s infinite;
}

.scroll-hint .el-icon {
  font-size: 14px;
  color: #9ca3af;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
  60% { transform: translateY(-2px); }
}

/* 筛选工具栏样式 */
.filter-toolbar {
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

/* 紧凑筛选区域样式 */
.filter-section-compact {
  margin-bottom: 16px;
}

.filter-section-compact:last-child {
  margin-bottom: 0;
}

.filter-title {
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

.filter-header-left {
  flex: 1;
}

/* 左右分栏筛选布局样式 */
.filter-row-split {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.filter-left-section {
  flex: 3;
  min-width: 400px;
  display: flex;
  align-items: stretch;
}

.filter-right-section {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
  height: 100%;
}

.filter-group-applicant {
  display: flex;
  align-items: flex-start;
  min-width: 350px;
  height: 100%;
  position: relative;
}

.filter-label-applicant {
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  font-size: 0.9rem;
  min-width: 60px;
  margin-top: 4px;
}

.applicant-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  height: 100%;
  overflow-y: auto;
  padding-right: 12px;
  align-content: flex-start;
  max-height: 120px;
  min-height: 80px;
}

.applicant-tags::-webkit-scrollbar { 
  width: 6px; 
}

.applicant-tags::-webkit-scrollbar-track { 
  background: #f1f5f9; 
  border-radius: 3px; 
}

.applicant-tags::-webkit-scrollbar-thumb { 
  background: #cbd5e1; 
  border-radius: 3px; 
}

.applicant-tags::-webkit-scrollbar-thumb:hover { 
  background: #94a3b8; 
}

/* 右侧筛选组样式 */
.filter-group-right {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 32px;
  flex: 1;
}

.filter-label-right {
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  font-size: 0.9rem;
  min-width: 40px;
  margin-top: 4px;
}

.filter-buttons-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-btn-right {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 6px 12px;
  height: 28px;
  font-size: 0.85rem;
  margin-bottom: 4px;
  white-space: nowrap;
}

.filter-btn-right:hover {
  transform: translateY(-1px);
}

.date-picker-right {
  width: 100% !important;
  min-width: 200px;
}

.date-picker-right :deep(.el-input__wrapper) {
  height: 32px !important;
}

.date-picker-right :deep(.el-input__inner) {
  font-size: 0.85rem !important;
}

/* 统一筛选行样式 */
.filter-row-unified {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.filter-group-unified {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 220px;
  flex: 1;
  flex-direction: column;
}

.filter-label-unified {
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  font-size: 0.9rem;
  min-width: 40px;
  margin-bottom: 8px;
}

.filter-btn-unified {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 6px 12px;
  height: 28px;
  font-size: 0.85rem;
  margin-right: 4px;
  margin-bottom: 4px;
  white-space: nowrap;
}

.filter-btn-unified:hover {
  transform: translateY(-1px);
}

/* 统一日期选择器 */
.date-picker-unified {
  width: 100% !important;
  min-width: 240px;
}

.date-picker-unified :deep(.el-input__wrapper) {
  height: 32px !important;
}

.date-picker-unified :deep(.el-input__inner) {
  font-size: 0.85rem !important;
}

/* 紧凑按钮组样式保留（用于其他可能的筛选区域） */

/* 紧凑筛选行样式保留（用于其他可能的筛选区域） */

/* 弹窗样式 */
.detail-dialog,
.approval-dialog {
  border-radius: 16px;
  overflow: hidden;
}

.detail-content,
.approval-content {
  padding: 20px;
}

.detail-header,
.approval-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}

/* 审核模态框专用样式 */
.approval-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.approval-header-row .info-chip {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #1e3a8a;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.approval-header-row .status-chip {
  margin-left: auto;
  display: flex;
}

/* 审核模态框按钮样式 */
.approval-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 0 0 0;
  border-top: 1px solid #e5e7eb;
}

.approval-actions .el-button {
  min-width: 100px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.approval-actions .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.detail-header-row { display:flex; align-items:center; gap:12px; flex-wrap: wrap; }
.detail-header-row .info-chip { 
  background:#eef2ff; border:1px solid #c7d2fe; color:#1e3a8a; 
  padding:4px 10px; border-radius:999px; font-size:.8rem; font-weight:600; white-space:nowrap;
}
.detail-header-row .status-chip { margin-left:auto; display:flex; }
.detail-header-row .approved-chip { display:flex; }
/* 核准工时标签升级样式 */
.approved-pill {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
  border-color: #86efac !important;
  color: #065f46 !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 4px 12px rgba(6, 95, 70, .12);
}
.approved-pill .el-tag__content { display:inline-flex; align-items:center; gap:6px; }
.approved-pill::before { content: "✅"; }

.detail-info { flex: 1; }
.detail-info-grid { 
  display: grid; 
  grid-template-columns: repeat(2, minmax(0, 1fr)); 
  gap: 12px 24px; 
}
.detail-info-grid .info-row { 
  margin: 0; 
  display: grid; 
  grid-template-columns: 100px 1fr; 
  align-items: center; 
  gap: 8px; 
}

.info-row {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.info-label {
  font-weight: 600;
  color: #374151;
  min-width: 80px;
}

.info-value {
  color: #6b7280;
}

.detail-status {
  flex-shrink: 0;
}

.detail-body,
.approval-body {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.detail-section,
.approval-section {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}
.detail-section.compact { padding: 16px; }
.detail-section .section-title { margin-bottom: 12px; }

.section-title {
  font-weight: 600;
  color: #374151;
  margin-bottom: 15px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.time-inline { margin-left: auto; display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.time-chip { 
  background:#f3f4f6; border:1px solid #e5e7eb; color:#374151; 
  padding:4px 10px; border-radius:999px; font-size:.8rem; white-space:nowrap;
}
.time-chip::before { content: "⏱️"; margin-right:6px; }

.section-title::before {
  content: '';
  width: 4px;
  height: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.overtime-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: 40vh;
  overflow-y: auto;
  padding-right: 8px;
}
.overtime-details-sign { display:flex; justify-content:flex-end; }
.signature-hint { color:#9ca3af; font-size:.85rem; text-align:right; }
.overtime-details::-webkit-scrollbar { width: 6px; }
.overtime-details::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.overtime-details::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.detail-item {
  background: white;
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #e2e8f0;
}

.item-header {
  margin-bottom: 10px;
}

.item-title {
  font-weight: 600;
  color: #374151;
  font-size: 1.1rem;
}

.item-content {
  color: #6b7280;
  line-height: 1.6;
  background: #f9fafb;
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #667eea;
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 详情弹窗-时间信息同一行显示 */
.detail-section .time-info {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}
.detail-section .time-row {
  margin: 0;
}
.detail-section .time-row.approved-row { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.time-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.time-label {
  font-weight: 600;
  color: #374151;
  min-width: 100px;
}

.time-value {
  color: #6b7280;
  font-family: monospace;
  background: #f3f4f6;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.time-value.approved {
  color: #059669;
  background: #d1fae5;
  border-color: #a7f3d0;
}

.comment-content {
  color: #6b7280;
  line-height: 1.6;
  background: #fef3c7;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #f59e0b;
}

.signature-display {
  text-align: center;
}

.signature-image {
  max-width: 120px;
  max-height: 80px;
  object-fit: contain;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

.resign-btn {
  margin-top: 10px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #d97706;
}

/* 签名部分样式 */
.signature-section {
  text-align: center;
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  border: 2px dashed #cbd5e1;
}

.signature-prompt {
  margin-bottom: 15px;
}

/* 审核模态框签名按钮样式 */
.signature-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.signature-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
}

.resign-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

.resign-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* 弹窗操作按钮 */
.approval-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}

.reject-content,
.approve-content {
  padding: 20px 0;
}

.hours-input {
  width: 200px;
}

.unit-text {
  margin-left: 10px;
  color: #6b7280;
  font-weight: 500;
}

.disabled-input {
  background: #f3f4f6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .time-selector {
    grid-template-columns: 1fr;
  }
  
  .filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .header-right {
    flex-direction: column;
    align-items: stretch;
  }
  
  .date-picker {
    width: 180px !important;
  }
}

/* 低屏幕高度适配 */
@media (max-height: 600px) {
  .form-scroll-container {
    max-height: calc(100vh - 200px);
  }
  
  .selected-projects {
    min-height: 150px;
    max-height: 200px;
  }
  
  .overtime-form {
    padding: 20px;
  }
  
  .form-item {
    margin-bottom: 20px;
  }
  
  .time-selector {
    gap: 15px;
  }
}

@media (max-height: 500px) {
  .form-scroll-container {
    max-height: calc(100vh - 180px);
  }
  
  .selected-projects {
    min-height: 120px;
    max-height: 150px;
  }
  
  .overtime-form {
    padding: 16px;
  }
  
  .form-item {
    margin-bottom: 16px;
  }
  
  .time-selector {
    gap: 12px;
  }
  
  .reason-radio-group .radio-group {
    gap: 12px;
  }
  
  .project-selector {
    margin-bottom: 16px;
  }
  
  .project-input-row {
    margin-bottom: 16px;
  }
}

/* 原有样式保留 */
.el-input.is-disabled .el-input__inner {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #606266;
}

.el-tag {
    margin-right: 8px;
}

.el-tag+.el-tag {
    margin-left: 0;
}

/* 详细查看弹窗样式 */
.detail-dialog {
    border-radius: 12px;
    overflow: hidden;
}

.detail-container {
    padding: 20px;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.detail-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.detail-section {
    margin-bottom: 24px;
}

.detail-row {
    display: flex;
    margin-bottom: 16px;
    line-height: 1.6;
}

.detail-label {
    width: 100px;
    font-weight: 500;
    color: #666;
}

.detail-value {
    flex: 1;
    color: #333;
}

.detail-tags {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 审核模态框签名区域样式 */
.approval-header .signature-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.signature-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.signature-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #333;
}

.rounded-button {
    border-radius: 6px !important;
}


/* 添加以下样式到style部分 */
.flex-nowrap {
    flex-wrap: nowrap;
}

.overflow-x-auto {
    overflow-x: auto;
}

/* 按钮组滚动条样式 */
::-webkit-scrollbar {
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}


.box-card {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    margin-top: 8px;
}

.box-card :deep(.el-card__header) {
    padding: 8px 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background-color: transparent !important;
}

.box-card :deep(.el-card__body) {
    padding: 8px 0 !important;
}

.box-card .bg-gray-50 {
    background-color: #f9f9f9 !important;
    border-radius: 4px !important;
    padding: 6px 8px !important;
    margin-bottom: 4px !important;
}

.box-card .el-button--danger {
    padding: 4px !important;
    background-color: transparent !important;
    border: none !important;
    color: #f56c6c !important;
}

.box-card .text-gray-400 {
    padding: 8px 0 !important;
    font-size: 13px !important;
}


/* 整体标签容器样式 */
.overtime-reason-tags {
    line-height: 1.6;
}

/* 每个加班原因标签样式 */
.overtime-reason-tags span {
    display: inline-block;
    margin: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: #f0f7ff;
    color: #409eff;
    border: 1px solid #d9ecff;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 高亮次数的样式 */
.overtime-reason-tags .highlight-count {
    color: #ff4d4f;
    font-weight: 500;
    margin-left: 2px;
}


.detail-dialog {
    border-radius: 8px;
}

.detail-container {
    padding: 0 10px;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reason-tag {
    margin-right: 8px;
}

.status-tag {
    font-weight: bold;
    font-size: 14px;
}

.detail-content {
    margin-top: 16px;
}

.detail-label {
    width: 100px;
    font-weight: bold;
    color: #606266;
}

.detail-value {
    color: #303133;
}

.highlight {
    color: #409EFF;
    font-weight: bold;
}

.reason-content {
    white-space: pre-line;
    line-height: 1.6;
    padding: 8px 0;
}

.comment {
    color: #F56C6C;
    font-weight: 500;
}

.signature-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed #EBEEF5;
}

.signature-title {
    color: #909399;
    margin-bottom: 12px;
    font-size: 14px;
}

.signature-wrapper {
    background: #f5f7fa;
    padding: 16px;
    border-radius: 4px;
    display: inline-block;
}


.dialog-footer {
    text-align: right;
}

.rounded-button {
    border-radius: 20px;
    padding: 10px 24px;
}

/* 调整Element UI组件样式 */
:deep(.el-descriptions__body) {
    background-color: #fafafa;
}

:deep(.el-descriptions__header) {
    margin-bottom: 16px;
}

:deep(.el-descriptions-item__cell) {
    padding: 12px 16px;
}


/* 加班项卡片样式 */
.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.reason-card {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background-color: #f5f7fa;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.reason-card:hover {
    background-color: #e4e7ed;
    transform: translateY(-2px);
}

.reason-index {
    font-weight: bold;
    color: #409eff;
    margin-right: 6px;
}

.reason-name {
    color: #606266;
}

.step-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.step-item {
    display: flex;
    align-items: center;
}

.step-index {
    width: 24px;
    height: 24px;
    background-color: #409eff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.step-content {
    padding: 8px 12px;
    background-color: #f5f7fa;
    border-radius: 4px;
    flex-grow: 1;
}

/* 添加打印按钮样式 */
.print-button {
    margin-bottom: 16px;
}

#print-template {
    display: none;
}


.wrap-bj {
    height: calc(100vh - 180px);
}

.wrap-tab {
    min-height: 120px;
    max-height: 160px;
    margin-bottom: 10px;
}

.wrap-tab1 {
    min-height: 35px;
    max-height: 70px;
    overflow: auto;
}

.wrap-tab1 button {
    margin-bottom: 6px;
}

.wrap-table {
    height: calc(100% - 160px);
    overflow: auto;
}

/* 查看样式 */
/* 查看弹框样式优化 */
.form-dialog {
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

.form-container {
    height: 600px;
    overflow: auto;
    padding: 10px;
    color: #333;
}

.form-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    background-color: #fff;
}

.form-table td {
    border: 1px solid #ddd;
    padding: 12px 16px;
    /* 增加内边距 */
    vertical-align: top;
    /* 顶部对齐 */
}

.form-label {
    width: 150px;
    background-color: #f8f8f8;
    font-weight: 600;
    /* 加粗 */
    text-align: center;
    color: #444;
    vertical-align: middle;
}

.form-value {
    min-height: 32px;
    color: #333;
    word-break: break-word;
    /* 长文本自动换行 */
}

/* 特别优化加班内容显示 */
.form-value div {
    margin-bottom: 8px;
}

.form-value div:last-child {
    margin-bottom: 0;
}

/* 优化说明文字 */
.form-notes {
    font-size: 14px;
    line-height: 1.8;
    /* 增加行高 */
    color: #444;
    padding: 12px;
    font-weight: bold;
}


/* 优化标题显示 */
.form-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #222;
}

/* 对于合并行中需要居中的单元格 */
.form-table td[rowspan] {
    vertical-align: middle;
    text-align: center;
}

/* 优化时间显示 */
.time-value {
    font-family: monospace;
    /* 等宽字体更整齐 */
    letter-spacing: 0.5px;
}

/* 签名图片样式 */
.signature-image {
    max-width: 100px;
    max-height: 60px;
    object-fit: contain;
    border-radius: 4px;
}

/* 签名按钮容器 */
.signature-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 60px;
}

/* 导出对话框样式 */
.export-dialog-content {
    padding: 20px 0;
}

.export-month-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.export-label {
    font-size: 14px;
    color: #606266;
    font-weight: 500;
    min-width: 80px;
}

.export-btn-right {
    margin-left: 16px;
}

/* 审核模态框签名信息样式 */
.signature-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 14px;
  padding: 8px 12px;
  background: #f3f4f6;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.signature-info .el-icon {
  color: #10b981;
  font-size: 16px;
}

/* 审核模态框签名显示区域样式 */
.signature-display {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.signature-image {
  max-width: 120px;
  max-height: 60px;
  border-radius: 4px;
}

.signature-prompt {
  display: flex;
  align-items: center;
}
</style>